<template>
  <div class="search-con">
    <div class="search-top">
      <a href="#" @click="$router.push('/')">
        <img src="imgs/icon-left.png" alt="">
      </a>
      <a class="input">
        <input type="text" placeholder="请输入搜索的商品" v-model.trim="searchValue" ref="input" @input="input">
        <van-icon name="cross" @click="clearInput" v-show="searchValue" />
      </a>
      <a @click="searchList">
        <img src="imgs/icon-search.png" alt="">
      </a>

    </div>
    <!-- 搜索历史和搜索推荐 -->
    <div class="content">
      <div class="history" v-show="historyList.length>0">
        <h2>搜索历史
          <span @click="deletedHistory">
            <van-icon name="delete-o" size="28" />
          </span>
        </h2>
        <div class="history-item">
          <router-link :to="`/list?keys=${item}`" v-for="(item,index) in historyList" :key="index">{{item}}</router-link>
        </div>
        <!-- <van-cell is-link @click="deletedHistory">展示弹出层</van-cell> -->
        <van-popup v-model="show" round>
          <div class="mask">
            <h3>是否清空搜索历史?</h3>
            <span class="left" @click="claerOrNo(1)">取消</span>
            <span class="right" @click="claerOrNo(2)">确定</span>
          </div>
        </van-popup>
      </div>
      <div class="find">
        <h2>搜索推荐
        </h2>
        <div class="find-item">
          <router-link :to="`/list?keys=${item}`" v-for="(item,index ) in findItem" :key="index">{{item}}</router-link>
        </div>
      </div>
    </div>
    <!-- 搜索弹窗 -->
    <div class="top-mask" @click="hiddenmask" v-show="showMask">
      <ul>
        <li class="mask-item" @click.stop="goList(item)" v-for="(item,index) in maskProductList" :key="index">
          {{item}}
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import debounce from 'lodash.debounce'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Search',
  data() {
    return {
      searchValue: '',
      // 搜索推荐
      findItem: ['全部商品', '小米手机', '笔记本', '电视'],
      // 控制弹窗是否显示
      show: false,
      // 控制遮罩层是否显示
      showMask: false,
      // 遮罩层显示的商品名称
      maskProductList: [],
      // 数据库现有的商品分类
      msqList: ['小米', '红米', '小米笔记本', '小米平板']
    }
  },
  mounted() {
    this.$refs.input.focus()
  },
  methods: {
    // 收集好要搜索的内容去往对应内容的数据页
    searchList() {
      if (this.searchValue === '') {
        this.$toast('搜索内容不能为空')
      } else {
        this.$store.commit('CHANGEHISTORY', this.searchValue)
        this.$router.push(`/list?keys=${this.searchValue}`)
      }
    },
    // 显示清空弹窗
    deletedHistory() {
      this.show = true
    },
    // 是否清空搜索历史
    claerOrNo(num) {
      if (num === 2) {
        this.$store.commit('DELETEDHISTORY')
        this.show = false
      } else {
        this.show = false
      }
    },
    // 隐藏mask
    hiddenmask() {
      this.showMask = false
    },
    // 去往搜索列表
    goList(value) {
      this.$store.dispatch('getSearchProductList')
      this.$router.push(`/list?keys=${value}`)
    },
    input:
      // eslint-disable-next-line space-before-function-paren
      debounce(function () {
        if (this.searchValue === '') {
          this.showMask = false
        } else {
          this.maskProductList = this.msqList.filter(item => item.indexOf(this.searchValue) !== -1)
          this.maskProductList.length > 0 ? (this.showMask = true) : (this.showMask = false)
        }
      }, 500),
    // 清空输入框
    clearInput() {
      this.showMask = false
      this.searchValue = ''
    }
  },
  computed: {
    ...mapState(['historyList'])
  }
}
</script>

<style lang='less' scoped>
.search-con {
  font-size: 28px;
  .search-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 45px;
    background-color: #f2f2f2;
    font-size: 28px;
    img {
      width: 50px;
      height: 50px;
    }
    .input {
      position: relative;
      .van-icon-cross {
        position: absolute;
        top: 50%;
        right: 25px;
        transform: translate(0, -50%);
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        background-color: #f6f6f6;
        border-radius: 20px;
      }
    }
    input {
      width: 500px;
      height: 50px;
      margin: 0 20px;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      padding-left: 20px;
      color: black;
    }
  }
  .content {
    padding: 40px;
    font-size: 28px;
    .history {
      span {
        float: right;
        margin-right: 30px;
      }
      .history-item {
        a {
          display: inline-block;
          max-width: 200px;
          padding: 12px 26px;
          margin: 24px 24px 0 0;
          background-color: #f5f5f5;
          border-radius: 36px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .mask {
        position: relative;
        width: 650px;
        height: 214px;
        padding: 0 30px;
        text-align: center;
        h3 {
          margin: 40px;
        }
        span {
          position: absolute;
          bottom: 0;
          display: inline-block;
          width: 50%;
          height: 92px;
          line-height: 92px;
          margin: 0;
          color: #999;
        }
        .left {
          left: 0;
          border-right: 1px solid #999;
        }
        .right {
          right: 0;
          color: #ff6600;
        }
      }
    }
    .find {
      margin-top: 40px;
      .find-item {
        display: flex;
        padding: 0 25px;
        width: 656px;
        flex-wrap: wrap;
        a {
          display: inline-block;
          flex: 50%;
          padding-top: 30px;
        }
      }
    }
  }
  .top-mask {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: 100%;
    background-color: #7f7f7f;
    ul {
      background-color: #fff;
      padding-left: 50px;
      line-height: 95px;
      .mask-item {
        height: 95px;
        font-size: 28x;
        background-color: #fff;
        border-bottom: 1px solid #7f7f7f;
        &:last-child {
          border: 0;
        }
      }
    }
  }
}
</style>
